import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Row, Col, Button, Modal } from 'antd'
import { LeftOutlined } from '@ant-design/icons'
import './style.scss'

export default () => {
  const navigate = useNavigate()
  const [isModalVisible, setIsModalVisible] = useState(false)

  const showModal = () => {
    setIsModalVisible(true)
  };

  const handleCancel = () => {
    setIsModalVisible(false)
  }

  return (
    <div className="page-401">
      <div className='container'>
        <Row>
          <Button
            type='primary'
            icon={<LeftOutlined />}
            onClick={() => window.history.back()} // window.history.go(-1)
          >
            返回
          </Button>
        </Row>
        <Row>
          <Col span={12} className="explain">
            <h1>Oops!</h1>
            <h2>你没有权限访问该页面</h2>
            <h3>如有不满请联系你的领导</h3>
            <ul>
              <li>或者你可以去：</li>
              <li onClick={() => navigate('/dashboard', { replace: true })}>回首页</li>
              <li><a href='https://www.bilibili.com/' target='_blank'>随便看看</a></li>
              <li onClick={showModal}>点我看图</li>
            </ul>
          </Col>
          <Col span={12}>
            <img src={require('../../assets/401.gif')} alt='' />
          </Col>
        </Row>
        <Modal
          width={648}
          title="Happy Dance"
          footer={null}
          visible={isModalVisible}
          onCancel={handleCancel}
        >
          <img style={{ width: '600px' }} src={require('../../assets/happy.gif')} alt='' />
        </Modal>
      </div>
    </div>
  )
}